<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="buyer account" prop="buyername">
            <el-input v-model="form.buyername" placeholder="please write buyer account"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="buyer password" prop="buyerpassword">
            <el-input v-model="form.buyerpassword" placeholder="if password is123456/Pass1234/Shopee123,dont need write"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="seller account" prop="shopname">
            <el-input v-model="form.shopname" placeholder="please write seller account"></el-input>
          </el-form-item>
        </el-col>
          <el-col :span="10">
            <el-form-item label="seller password" prop="shoppassword">
              <el-input v-model="form.shoppassword" placeholder="if password is123456/Pass1234/Shopee123,dont need write"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-form-item label="region" prop="region">
        <el-radio v-model="form.region" label="sg">sg</el-radio>
        <el-radio v-model="form.region" label="tw">tw</el-radio>
        <el-radio v-model="form.region" label="ph">ph</el-radio>
        <el-radio v-model="form.region" label="vn">vn</el-radio>
        <el-radio v-model="form.region" label="id">id</el-radio>
        <el-radio v-model="form.region" label="my">my</el-radio>
        <el-radio v-model="form.region" label="th">th</el-radio>
        <el-radio v-model="form.region" label="br">br</el-radio>
        <el-radio v-model="form.region" label="co">co</el-radio>
        <el-radio v-model="form.region" label="cl">cl</el-radio>
        <el-radio v-model="form.region" label="mx">mx</el-radio>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form.env" label="test">test</el-radio>
        <el-radio v-model="form.env" label="uat">uat</el-radio>
        <el-radio v-model="form.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item label="total_payment" prop="total_payment">
        <el-input v-model="form.total_payment" placeholder="please write order total amount" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="pay_time" prop="pay_time">
        <el-input v-model="form.pay_time" placeholder="please write order pay_time，the default value is now" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="complete_time" prop="complete_time">
        <el-input v-model="form.complete_time" placeholder="please write order complete_time default value is now" style="width: 50%"></el-input>
      </el-form-item>
      <el-button v-if="!showItemCard" @click="changeItemCard" class="box-card" icon="el-icon-edit" style='background:steelblue;color:white'>自定义item
      </el-button>

       <el-card class="box-card" v-if="showItemCard">
        <el-table :data="form.items" style="width: 100%" :row-class-name="tableRowClassName" :header-cell-style="{background:'#e7edf3'}">
          <el-table-column prop="item_id" label="item_id" width="180" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].item_id'" class="form_item_no_label" :rules="rules.item_id">
                <el-input v-model.number="form.items[scope.$index].item_id" value="item_id"
                          placeholder="请输入item id"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="model_id" label="model_id" width="180" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].model_id'" class="form_item_no_label" :rules="rules.model_id">
                <el-input v-model.trim="form.items[scope.$index].model_id" value="model_id"
                          placeholder="请输入model id" style="width:80%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="quantity" label="quantity" width="190" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].quantity'" class="form_item_no_label" :rules="rules.quantity">
                <el-input-number v-model.number="form.items[scope.$index].quantity" :min="1"
                                 :max="3"></el-input-number>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="item_price" label="item_price" width="180" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].item_price'" class="form_item_no_label" :rules="rules.item_price">
                <el-input v-model.trim="form.items[scope.$index].item_price" value="item_price"
                          placeholder="商品单价" style="width:80%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="item_status" label="item_status" width="180" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].item_status'" class="form_item_no_label" :rules="rules.item_status">
                <el-input v-model.trim="form.items[scope.$index].item_status" value="item_status"
                          placeholder="商品状态" style="width:80%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="global_cat_ids" label="global_cat_ids" width="220" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].global_cat_ids'" class="form_item_no_label" align="center">
                <el-input v-model.trim="form.items[scope.$index].global_cat_ids" value="global_cat_ids"
                          placeholder="请输入global_cat_ids" style="width:80%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="local_cat_ids" label="local_cat_ids" width="220" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'items['+scope.$index+'].local_cat_ids'" class="form_item_no_label" placement="top-start">
                <el-input v-model.trim="form.items[scope.$index].local_cat_ids" value="local_cat_ids"
                          placeholder="请输入local_cat_ids" style="width:80%"></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column width="140" align="center">
            <template slot="header">
              <el-button type="success" @click="addItem()" align="center"><i class="el-icon-circle-plus-outline"></i>&nbsp;新增item
              </el-button>
            </template>
            <template slot-scope="scope" align="center">
              <el-tooltip class="item" effect="dark" content="删除此项item" placement="top-start">
                <i class="el-icon-delete" style="color: red" @click="deleteItem(scope.$index)"></i>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column width="140" align="center">
            <template slot="header">
              <el-button type="warning" @click="changeItemCard">使用默认item</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-form-item style="margin-top: 20px" align="center">
        <el-button type="primary" @click="onSubmit('form')">Create Order Now</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard" v-loading="isLoadingResult">
      <result-pane :resultReturn="resultReturn"></result-pane>
    </div>
    <br>
  </div>
</template>

<script>
  import ResultPane from './ResultPane'
  import {api, postRequest} from "@/api/commit";
  export default {
    name: "AddPoint",
    data() {
      return {
        showItemCard: false,
        showResultCard: false,
        isLoadingResult: false,
        form: {
          buyername: '',
          buyerpassword: '',
          shopname: '',
          shoppassword:'',
          region: 'sg',
          env: 'test',
          total_payment:'',
          pay_time:"",
          complete_time:"",
          items: [
            {
              item_id: "",
              model_id: 0,
              quantity: 1,
              item_status: 1,
              item_price:100,
              global_cat_ids:"1,2,3",
              local_cat_ids:"1,2,3"
            }
          ]
        },
        rules: {
          buyername: [
            {required: true, message: 'buyername不能为空', trigger: 'blur'}
          ],
          shopname: [
            {required: true, message: 'shopname不能为空', trigger: 'blur'}
          ],
          region: [
            {required: true, message: 'region不能为空', trigger: 'blur'}
          ],
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
          total_payment: [
            {required: true, message: 'total_payment不能为空', trigger: 'blur'}
          ],
          item_id: [
            {required: true, message: 'item_id不能为空', trigger: 'blur'}
          ],
          model_id: [
            {required: true, message: 'model_id不能为空', trigger: 'blur'}
          ],
          quantity: [
            {required: true, message: 'quantity不能为空', trigger: 'blur'},
            {type: 'number', message: 'quantity必须为数字值', trigger: 'blur'}
          ],
          item_price: [
            {required: true, message: 'item_price不能为空', trigger: 'blur'}
          ],
          item_status: [
            {required: true, message: 'item_status不能为空', trigger: 'blur'}
          ],
        }
      }
    },
    components:{
      ResultPane
    },
    methods: {
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
         if (this.form.buyerpassword==''){
            delete this.form.buyerpassword
          }
          if (this.form.shoppassword==''){
            delete this.form.shoppassword
          }
          let params = Object.assign({}, this.form);
          if (params.items[0].item_id===""){
            params.items=null
          }else{
            for(var i=0;i<params.items.length;i++){
              params.items[i].item_price = parseFloat(params.items[i].item_price)
              params.items[i].model_id = parseInt(params.items[i].model_id)
              params.items[i].item_status = parseInt(params.items[i].item_status)
            }
          }
          params.total_payment = parseFloat(params.total_payment)
          params.pay_time = parseInt(params.pay_time)
          params.complete_time = parseInt(params.complete_time)
          postRequest(api['add_point_mock_order'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      },
      changeItemCard() {
        this.showItemCard = !this.showItemCard
        if (this.showItemCard == false) {
          console.log("item is null",this.form.items)
          this.form.items =
          [{
              item_id: "",
              model_id: 0,
              quantity: 1,
              item_status: 1,
              item_price:100,
              global_cat_ids:"1,2,3",
              local_cat_ids:"1,2,3"
          }]
        }
      },
      deleteItem(index) {
        if (this.form.items.length===1){
          return
        }else{
          this.form.items.splice(index, 1)
        }
      },
      addItem() {
        let item = {
          item_id: "",
          model_id: 0,
          quantity: 1,
          item_status: 1,
          item_price:100,
          global_cat_ids:"1,2,3",
          local_cat_ids:"1,2,3"
        }
        this.form.items.push(item)
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    },
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .box-card {
    margin-bottom: 30px;
  }

  .form_item_no_label >>> .el-form-item__content {
    margin-left: 0px !important;
  }
</style>

